@charset "utf-8";
@import "reset.scss";
@import "common.scss";
@function vw($w) {
  @return ($w/1920) * 100 + vw;
}

.wrap {
  width: 100%;

  header {
    width: 100%;
    height: vw(1000);
    position: relative;

    .shoutu {
      width: 100%;
      height: 100%;
    }

    .hei {
      width: 100%;
      height: 100%;
      background-color: rgba($color: #000000, $alpha: 0.5);
      position: absolute;
      left: 0;
      top: 0;
    }

    .ziti1 {
      width: vw(720);
      height: vw(75);
      position: absolute;
      left: 30%;
      top: 40%;
    }

    .ziti2 {
      width: vw(1000);
      height: vw(30);
      position: absolute;
      left: 23%;
      top: 50%;
    }

    .ziti3 {
      width: vw(380);
      height: vw(40);
      position: absolute;
      left: 40%;
      top: 55%;
    }
  }

  main {
    width: 100%;

    .guanyuwomen {
      width: 100%;
      height: vw(960);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
      padding-top: vw(130);

      .biaoti-1 {
        width: vw(260);
        height: vw(105);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        margin-bottom: vw(50);

        p {
          color: #333333;
          font-size: vw(65);
          font-weight: bold;

          &:last-of-type {
            font-size: vw(22);
            color: #cccccc;
            letter-spacing: vw(10);
          }
        }
      }

      .biaoti-2 {
        margin-top: vw(50);
      }

      .text {
        width: vw(1000);
        height: vw(420);
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: vw(100);

        h3 {
          color: grey;
          font-size: vw(30);
          margin-bottom: vw(30);
        }

        p {
          font-size: vw(14);
          color: gray;
          line-height: vw(25);
          padding-left: vw(30);
          padding-right: vw(20);
        }
      }
    }

    .shipin {
      width: 100%;
      height: vw(1000);
      position: relative;

      img {
        width: 100%;
        height: 100%;
      }

      .heise-3 {
        width: 100%;
        height: 100%;
        background-color: rgba($color: #000000, $alpha: 0.5);
        position: absolute;
        left: 0;
        top: 0;

        .bofang {
          width: vw(180);
          height: vw(130);
          // background-color: #000000;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          position: absolute;
          left: 45%;
          top: 50%;
  
          .play {
            width: vw(90);
            height: vw(90);
          }
  
          p {
            font-size: vw(15);
            color: rgba($color: orangered, $alpha: 0.6);
            letter-spacing: vw(5);
            font-weight: bold;
          }
        }
      }

      

      .ziti8 {
        width: vw(565);
        height: vw(75);
        position: absolute;
        left: 35%;
        top: 50%;
      }
    }

    .qiyewenhua {
      width: 100%;
      height: vw(600);

      .biaoti-1 {
        width: vw(600);
        height: vw(105);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        margin-bottom: vw(50);
        margin-left: vw(650);
        padding-top: vw(50);

        p {
          color: #333333;
          font-size: vw(65);
          font-weight: bold;

          &:last-of-type {
            font-size: vw(22);
            color: #cccccc;
            letter-spacing: vw(10);
          }
        }
      }

      .text1 {
        width: vw(1020);
        height: vw(150);
        color: grey;
        font-size: vw(18);
        line-height: vw(35);
        margin-left: vw(450);
      }
    }

    .qiyetuandui {
      width: 100%;
      height: vw(960);
      background-color: #111111;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-items: center;
      padding-top: vw(120);

      .biaoti-1 {
        width: vw(600);
        height: vw(105);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        margin-bottom: vw(50);

        p {
          color: #cccccc;
          font-size: vw(65);
          font-weight: bold;

          &:last-of-type {
            font-size: vw(22);
            color: #646060;
            letter-spacing: vw(10);
          }
        }
      }

      .text {
        width: vw(900);
        height: vw(190);
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: vw(100);

        h3 {
          color: gray;
          font-size: vw(30);
          margin-bottom: vw(30);
        }

        p {
          font-size: vw(14);
          color: gray;
          line-height: vw(25);
          padding-left: vw(30);
          padding-right: vw(20);
        }
      }

      .geren{
        width: vw(1110);
        height: vw(400);
        display: flex;
        
  
        .geren-1{
          width: vw(390);
          height: vw(400);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-evenly;
        

          .touxiang{
            width: vw(126);
            height: vw(126);
            border-radius: 50%;
          

            img{
              width: 100%;
              border-radius: 50%;
            }
          }

          p{
           

            &:first-of-type{
              font-size: vw(16);
              color: white;
             letter-spacing:vw(3);

            }

            &:nth-of-type(2){
              font-size: vw(13);
              color: orangered;
            }

            &:nth-of-type(3){
              color: gray;
              font-size: vw(10);
              width: vw(365);
              line-height: vw(22);
              text-align: center;
            }
           
          }

          .xian{
            background-color: gray;
            width: vw(50);
            height: vw(1);
          }
         
          i{
            font-size: vw(30);
            color: gray;
          }
          
        }
      }
    }
  }

}
